<template>
    <view class="dynamic-card">
        <view class="item" @tap="toDynamicDetail()">
            <view class="header-box">
                <view class="user-info">
                    <up-avatar :src="item.user?.avatar" size="50"></up-avatar>
                    <view class="info-box">
                        <view class="nickname">{{ item.user?.nickname }}</view>
                        <view class="create_time">{{ item?.createtime_text }}</view>
                    </view>
                </view>
                <view class="more-icon" v-if="item.createFlag" @tap.stop="operation">
                    <up-icon name="more-dot-fill" size="24" ></up-icon>
                </view>
            </view>
            <view class="body-box">
                <view class="title">{{ item.title }}</view>
                <view class="content">{{ item.content }}</view>
            </view>
            <view class="footer-box">
                <view class="footer-item" @tap.stop="likeHandler">
                    <up-icon name="thumb-up" size="30"></up-icon>
                    <view class="num">{{ item.like_count }}</view>
                </view>
                <view class="footer-item">
                    <up-icon name="eye" size="24"></up-icon>
                    <view class="num">{{ item.read_count }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
const emits = defineEmits(['success', 'operation'])
const props = defineProps({
    item: {
        type: Object,
        default: {}
    },
    disabled: {
        type: Boolean,
        default: false
    }
})

// 动态详情
const toDynamicDetail = (item) => {
    if (props.disabled) {
        return
    }
    qly.page.open('/pages/home/dynamic/detail', {id: props.item.id})
}

// 点赞
const likeHandler = async () => {
    const res = await qly.api.user.information.like({id: props.item.id})
    if (res.code === 1) {
        emits('success')
        qly.dialog.success()
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 点击操作
const operation = () => {
    emits('operation', props.item)
}
</script>
<style scoped lang="scss">
.dynamic-card {
    .item {
        padding: 24rpx 32rpx;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 12rpx;
        
        .header-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 0 12rpx;
            
            .user-info {
                display: flex;
                align-items: center;
                gap: 12rpx;
                
                .info-box {
                    .nickname {
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #303133;
                    }
                    
                    .create_time {
                        font-size: 24rpx;
                        color: #606266;
                        margin-top: 12rpx;
                    }
                }
            }
        }
        
        .body-box {
            .title {
                font-weight: 500;
                font-size: 32rpx;
                color: #303133;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .content {
                font-size: 28rpx;
                color: #606266;
                line-height: 42rpx;
                white-space: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-top: 12rpx;
            }
        }
        
        .footer-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12rpx;
            
            .footer-item {
                display: flex;
                align-items: center;
                gap: 8rpx;
                
                .num {
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #303133;
                }
            }
        }
    }
}
</style>
